<template>
  <div class="nav-menu">
    <div class="logo">图标</div>
    <!-- 菜单栏 -->
    <div class="menu">
      <el-menu router active-text-color="#fff" text-color="#b7bdc3" background-color="#001529">
        <el-menu-item index="/main/dashboard">
          <el-icon><icon-menu /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/main/department">
          <el-icon><icon-menu /></el-icon>
          <span>组织</span>
        </el-menu-item>
        <el-menu-item index="/main/role">
          <el-icon><icon-menu /></el-icon>
          <span>角色</span>
        </el-menu-item>
        <el-menu-item index="/main/employee">
          <el-icon><icon-menu /></el-icon>
          <span>员工</span>
        </el-menu-item>
        <el-menu-item index="/main/permission">
          <el-icon><icon-menu /></el-icon>
          <span>权限</span>
        </el-menu-item>
        <!-- <template v-for="(item, index) in count" :key="index">
          <el-menu-item index="1">
            <el-icon><icon-menu /></el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template> -->
      </el-menu>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, reactive } from "vue";
// import { title } from "process";
// import { useRoute, useRouter } from "vue-router";

// cconst route = useRoute();
const count = reactive([
  {
    name: "首页",
    path: "",
  },
  {
    name: "组织",
    path: "",
  },
  {
    name: "员工",
    path: "",
  },
  {
    name: "权限",
    path: "",
  },
  {
    name: "角色",
    path: "",
  },
]);
</script>
<style scoped lang="scss">
.nav-menu {
  height: 100%;
  background-color: #001529;
}
.logo {
  display: flex;
  height: 50px;
  color: red;
  padding: 12px 10px 8px 10px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.el-menu-item {
  width: 210px;
  padding-left: -50px !important;
  background-color: #001529;
}
.el-menu-item :hover {
  color: #dfdc15;
}
.el-menu-item.is-active {
  background-color: #0a60bd;
}
</style>
